import { useState } from "react";
import { Layout, Row, Col, Card, Typography } from "antd";
import ImageUpload from "./components/ImageUpload";
import ImageDisplay from "./components/ImageDisplay";
import OCRProcessor from "./components/OCRProcessor";
import "./App.css";

const { Header, Content } = Layout;
const { Title } = Typography;

function App() {
  const [uploadedImage, setUploadedImage] = useState(null);
  const [ocrResults, setOcrResults] = useState(null);
  const [processedImages, setProcessedImages] = useState([]);

  const handleImageUpload = (imageFile, imageUrl) => {
    setUploadedImage({ file: imageFile, url: imageUrl });
    setOcrResults(null);
    setProcessedImages([]);
  };

  const handleOCRComplete = (results) => {
    console.log("OCR处理完成:", results);
    setOcrResults(results);
  };

  const handleProcessComplete = (images) => {
    setProcessedImages(images);
  };

  return (
    <Layout style={{ minHeight: "100vh" }}>
      <Header
        style={{
          background: "#fff",
          padding: "0 24px",
          borderBottom: "1px solid #f0f0f0",
        }}
      >
        <Title level={2} style={{ margin: "16px 0", color: "#1890ff" }}>
          试卷切割系统
        </Title>
      </Header>
      <Content style={{ padding: "24px", background: "#f5f5f5" }}>
        <Row gutter={24} style={{ height: "calc(100vh - 120px)" }}>
          {/* 左侧操作区域 */}
          <Col span={8}>
            <Card
              title="操作面板"
              style={{ height: "100%", overflow: "auto" }}
              bodyStyle={{ padding: "16px" }}
            >
              <ImageUpload onImageUpload={handleImageUpload} />

              {uploadedImage && (
                <OCRProcessor
                  image={uploadedImage}
                  onOCRComplete={handleOCRComplete}
                  onProcessComplete={handleProcessComplete}
                />
              )}
            </Card>
          </Col>

          {/* 右侧展示区域 */}
          <Col span={16}>
            <Card
              title="结果展示"
              style={{ height: "100%", overflow: "auto" }}
              bodyStyle={{ padding: "16px" }}
            >
              <ImageDisplay
                originalImage={uploadedImage}
                ocrResults={ocrResults}
                processedImages={processedImages}
              />
            </Card>
          </Col>
        </Row>
      </Content>
    </Layout>
  );
}

export default App;
